<template>
  <div class="app-container">
    <div class="w-table">
      <!-- 筛选 -->
      <table-filter @save="filterChange" />

      <!-- btn -->
      <div class="w-table-btn">
        <el-button icon="plus" plain type="primary" @click="add">
          新增班级
        </el-button>
      </div>

      <!-- 表格 -->
      <table-body
        ref="table"
        v-model="selection"
        v-loading="loading"
        class="w-table-b"
        :list="list"
        @del="del"
        @detail="detail"
        @edit="edit"
        @sort-change="sortChange"
      />

      <!-- 翻页 -->
      <div class="w-table-f">
        <el-pagination
          v-model:current-page="queryData.pageNum"
          v-model:page-size="queryData.pageSize"
          background
          layout="total,->,prev, pager, next ,sizes ,jumper"
          :pager-count="5"
          :total="pageTotal"
          @current-change="request"
          @size-change="request"
        />
      </div>
    </div>

    <!-- 弹出窗 -->
    <table-edit ref="editDialog" @save="request" />
  </div>
</template>

<script setup>
  import $api from './api.js'
  import TableFilter from './filter.vue'
  import TableBody from './body.vue'
  import TableEdit from './edit.vue'

  const emits = defineEmits([
    'detail',
    'edit',
    'del',
    'update:modelValue',
    'sortChange',
    'save',
  ])
  const props = defineProps({
    id: {
      type: [Number, String, Boolean, Array, Object],
      default: 0,
    },
    modelValue: {
      type: Object,
      default: () => {
        return {
          type: null,
          id: null,
        }
      },
    },
  })
  const { proxy } = getCurrentInstance()

  // data
  const selection = ref([])
  const list = ref([])
  const queryData = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const loading = ref(false)
  const pageTotal = ref(0)

  // 计数属性
  const treeValue = computed({
    get() {
      return props.modelValue
    },

    set(newValue) {
      emits('update:modelValue', newValue)
    },
  })

  // 方法
  function load() {
    request()
  }

  function request(v) {
    const sendData = {
      ...queryData.value,
      ...v,
    }
    loading.value = true
    $api
      .list(sendData)
      .then((res) => {
        list.value = res.rows
        pageTotal.value = res.total
      })
      .finally(() => {
        loading.value = false
      })
  }

  function edit(row) {
    proxy.$refs.editDialog.load(row)
  }

  defineExpose({
    load,
  })

  // 生命周期
  onMounted(() => {
    load()
  })
</script>

<style lang="scss" scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f6f8;
    margin-left: 10px;
    height: calc(100vh - 97px);
    overflow: auto;
  }

  .w-table {
    padding: 20px;
    background-color: #fff;
    height: 100%;
    border-radius: 8px;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    gap: 20px;

    .w-table-filter {
      border-bottom: 1px solid #dcdee2;
    }
    .w-table-btn {
    }
    .w-table-filter-input {
      width: 200px;
    }

    .w-table-b {
      flex: 1;
      overflow: hidden;
    }
  }
</style>
